<template>
  <div id="keepTrue">
    <div v-color:[argName]="{color:'#d3d3d3',fontSize:'32px',align:'center'}">
      keepTrue 局部自定义指令
    </div>
    <a-input
      v-model:value="value"
      placeholder="Basic usage"
    />
    <div class="divCenter">
      <div
        style="margin:10px 0px;"
        :key="item"
        v-for="item in imgArr"
      >
        <img
          width="200"
          height="200"
          :src="getAssetsFile(`default`)"
          :class="item"
          :alt="getAssetsFile(`${item}`)"
        >
      </div>
    </div>
  </div>
  <a-button @click="clickWindow">
    windows点击事件
  </a-button>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, onMounted, onUnmounted } from 'vue'
export default defineComponent({
  props: {
    msg: {
      default: 'keeptrue没传值过来',
      type: String
    }
  },
  name: 'KeepTrue',
  directives: { // 局部自定义指令
    color: {
      mounted: (el, binding) => {
        console.log(binding.instance, 'instance')
        console.log(binding.arg, 'arg')
        el.style.color = binding.value.color
        el.style.fontSize = binding.value.fontSize
        el.style.textAlign = binding.value.align
      }
    }
  },
  setup () {
    const imgArr = [
      'vue',
      'react',
      'angular',
      'typescript',
      'jquery',
      'HTML5',
      'babel',
      'Bootstrap',
      'Nodejs',
      'CSS3',
      'Webpack',
      'wechat'
    ]
    const data = reactive({ value: 'keepTrue' })
    // 获取assets静态资源
    const getAssetsFile = (url: string) => {
      return new URL(`../../assets/image/${url}.png`, import.meta.url).href
    }

    const querySelect = (item:string|number):Element => {
      return document.querySelector(`.${item}`) as Element
    }

    const interSectionObeserverOptions = {
      threshold: 1,
      root: document.querySelector('.divCenter') // 父节点-视图区域 - 或者document文档
    }
    const argName = '胡歌'
    // 视图监听
    // target 监听节点
    // isIntersecting 是否进入视图区
    // intersectionRatio 进入视图的比例
    const interSectionObeserver = new IntersectionObserver((intersectionObserverEntrys:Array<IntersectionObserverEntry>) => {
      intersectionObserverEntrys.forEach((intersectionObserverEntry) => {
        if (intersectionObserverEntry.intersectionRatio <= 0) return
        const dom = intersectionObserverEntry.target
        if (intersectionObserverEntry.isIntersecting) {
          setTimeout(() => {
            const src = dom.getAttribute('alt') as string
            dom.setAttribute('src', src)
            interSectionObeserver.unobserve(dom)
          }, 1000)
        }
      })
    }, interSectionObeserverOptions)

    // widows事件测试
    const clickWindow = () => {
      console.log(window, 'window')
      // window.open('/keepAliveAbout')
      // window.close() // 关闭窗口
      // window.moveTo // 移动窗口
      const arr:any = [1, 2, 3]
      arr.push('王五')
      console.log(arr, 'arr数组混入字符串')
      console.log(window.screen)
    }
    // Symbol
    const symbol = Symbol('qwertasdf')
    console.log(symbol, 'symbol640706893')
    onMounted(() => {
      const openUrlParam = {
        method: 'openRpt',
        m: 'openReportWritePage',
        fuck: '英语4'
      }
      const searchParam = new URLSearchParams(openUrlParam)
      console.log(searchParam.get('fuck'), 'searchParam')
      for (const key of imgArr) {
        interSectionObeserver.observe(querySelect(key))
      }
    })
    onUnmounted(() => {
      interSectionObeserver.disconnect()
    })

    return {
      ...toRefs(data),
      getAssetsFile,
      imgArr,
      clickWindow,
      argName
    }
  }
})

</script>

<style scoped lang='less'>
.divCenter{
  display: flex;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 320px;
  height: 320px;
  border: 1px solid red;
  overflow-y: scroll;
  box-sizing: border-box;
}
</style>
